<template>
  <view class="wrap pb-ios">
    <u-navbar
      backIconColor="#333333"
      title-size="36"
      title="云盟商城"
      height="50"
      :is-back="true"
      :border-bottom="false"
      title-color="#333333"
    >
    </u-navbar>
    <u-gap height="20"></u-gap>
    <view class="goods-box">
      <u-waterfall v-model="flowList" ref="uWaterfall">
        <template v-slot:left="{ leftList }">
          <view
            class="demo-warter"
            v-for="(item, index) in leftList"
            :key="index"
            @click="onGoodsDetail(item)"
          >
            <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
            <u-lazy-load
              threshold="-450"
              border-radius="10"
              :image="item.picUrl"
              :index="index"
            ></u-lazy-load>
            <view class="content goods-item">
              <view class="demo-title">
                {{ item.name }}
              </view>
              <view class="goods-price dis-flex">
                <view class="old-price">
                  <text class="t">原价:¥</text>
                  <text class="n">{{ item.priceYuan }}</text>
                </view>
                <view class="vip-price">
                  <text class="t">会员价:¥</text>
                  <text class="n">{{ item.vipPriceYuan }}</text>
                </view>
              </view>
              <view class="goods-point dis-flex">
                <view class="point" v-if="item.pointDeductCount">
                  {{ item.pointDeductCount }}积分抵¥{{ item.pointDeductPriceYuan }}
                </view>
                <view class="coupon" v-if="item.hasCoupon">优惠券</view>
              </view>

              <view class="demo-shop dis-flex flex-y-between">
                <view class="price">{{ item.cryptocurrencyDeductCount }}收益豆</view>
                <view class="buy" @click.stop.prevent="buyNow(item)">购买</view>
              </view>
            </view>
            <!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
          </view>
        </template>
        <template v-slot:right="{ rightList }">
          <view
            class="demo-warter"
            v-for="(item, index) in rightList"
            :key="index"
            @click="onGoodsDetail(item)"
          >
            <u-lazy-load
              threshold="-450"
              border-radius="10"
              :image="item.picUrl"
              :index="index"
            ></u-lazy-load>
            <view class="content">
              <view class="demo-title">
                {{ item.name }}
              </view>
              <view class="goods-price dis-flex">
                <view class="old-price">
                  <text class="t">原价:¥</text>
                  <text class="n">{{ item.priceYuan }}</text>
                </view>
                <view class="vip-price">
                  <text class="t">会员价:¥</text>
                  <text class="n">{{ item.vipPriceYuan }}</text>
                </view>
              </view>
              <view class="goods-point dis-flex">
                <view class="point" v-if="item.pointDeductCount">
                  {{ item.pointDeductCount }}积分抵¥{{ item.pointDeductPriceYuan }}
                </view>
                <view class="coupon" v-if="item.hasCoupon">优惠券</view>
              </view>

              <view class="demo-shop dis-flex flex-y-between">
                <view class="price">{{ item.cryptocurrencyDeductCount }}收益豆</view>
                <view class="buy" @click.stop.prevent="buyNow(item)">购买</view>
              </view>
            </view>
          </view>
        </template>
      </u-waterfall>
    </view>
    <u-loadmore
      bg-color="rgb(240, 240, 240)"
      :status="loadStatus"
      @loadmore="addRandomData"
    ></u-loadmore>
    <vk-data-goods-sku-popup
      v-model="skuPopup"
      :localdata="skuInfo"
      :mode="skuMode"
      goodsThumbName="image"
      border-radius="20"
      buy-now-background-color="#10A28F"
      goodsThumbBackgroundColor="#f5f5f5"
      add-cart-background-color="#FF6F10"
      @cart="onAddCart"
      @buy="onGoodsBuy"
    >
    </vk-data-goods-sku-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadStatus: 'loadmore',
      flowList: [],
      list: [],
      page: 1,
      skuPopup: false,
      skuMode: 3,
      skuInfo: {}
    }
  },
  onLoad() {
    this.queryList(1)
  },
  onReachBottom() {
    this.loadStatus = 'loading'
    this.page++
    this.queryList(this.page)
  },

  methods: {
    addRandomData() {
      for (let i = 0; i < this.list.length; i++) {
        // let index = this.$u.random(0, this.list.length - 1);
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(this.list[i]))
        // item.id = this.$u.guid();
        this.flowList.push(item)
      }
    },
    remove(id) {
      this.$refs.uWaterfall.remove(id)
    },
    clear() {
      this.$refs.uWaterfall.clear()
    },
    queryList(page = 1, pageSize = 10) {
      this.$u
        .get('/app-api/product/spu/page-by-cloud-alliance', {
          pageNo: page,
          pageSize
        })
        .then((res) => {
          // let dynamicPaging = this.scurrent > 0 ? 'paging' + this.scurrent : "paging"
          // this.$refs.paging.complete();
          // this.extra = res.data.extra
          this.list = res.data.list
          if (this.list.length < 10) {
            this.loadStatus = 'nomore'
          }
          this.addRandomData()
        })
    },
    onGoodsDetail(item) {
      if (item.type === 'mall') {
        this.$utils.route({
          url: '/shops/goods-detail',
          params: {
            goodsId: item.id
          }
        })
        return
      }
      this.$utils.route({
        url: '/goods/goods-details/goods-details',
        params: {
          goodsId: item.id
        }
      })
    },
    buyNow(goods) {
      this.$u.api
        .getGoodsDetails({
          id: goods.id
        })
        .then((res) => {
          if (res.code !== 0) {
            this.$u.toast(res.msg)
            return
          }
          res.data.sku_list = res.data.uniapp.sku_list
          res.data.sku_list.forEach((item) => {
            item.price = (item.price * 0.01).toFixed(2)
          })
          res.data.spec_list = res.data.uniapp.spec_list
          this.skuInfo = res.data
          this.skuPopup = true
        })
    },
    onGoodsBuy(item) {
      // {"_id":"1873984487220756482","goods_id":"1873984485752750081","goods_name":"男鸭舌帽包头帽护耳帽冷帽男韩版男士毛线帽冬天防寒保暖针织帽子","price":"12.80","group_price":1280,"snap_price":1280,"image":"","stock":998,"spec_value_ids":["1873983929936166913"],"sku_name_arr":["藏青色"],"buy_num":1}
      let items = []
      items.push({
        skuId: item._id,
        count: item.buy_num
      })
      this.skuPopup = false
      this.skuInfo = null
      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          items: JSON.stringify(items)
        }
      })
    }
  }
}
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
  background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
.goods-box {
  margin: 0 20rpx;
}

.demo-warter {
  border-radius: 8px;
  background-color: #ffffff;
  position: relative;
  margin-right: 20rpx;
  margin-bottom: 21rpx;
  width: 345rpx;
}

#u-left-column {
  .demo-warter {
    margin-right: 20rpx;
  }
}

.content {
  padding: 20rpx;

  .demo-title {
    font-size: 28rpx;
    margin-bottom: 19rpx;
  }

  .demo-price {
    font-size: 24rpx;
    color: #ff6f10;
    margin-bottom: 19rpx;
  }

  .demo-shop {
    font-weight: 500;
    font-size: 30rpx;
    color: #fa453c;

    .buy {
      width: 96rpx;
      height: 50rpx;
      background: #10a28f;
      border-radius: 25rpx;
      border: 1px solid #10a28f;
      font-size: 22rpx;
      color: #ffffff;
      line-height: 50rpx;
      text-align: center;
    }
  }
}

.goods-price {
  margin-bottom: 10rpx;
  flex-flow: column;

  .t {
    font-size: 26rpx;
  }

  .n {
    font-size: 32rpx;
    font-weight: 600;
  }

  .vip-price {
    color: #fa453c !important;
    // margin-left: 10rpx;
  }
}

.goods-point {
  align-items: center;

  .point {
    font-size: 24rpx;
    color: #ff6f10;
    margin-right: 20rpx;
  }

  .coupon {
    background: #ebfaf8;
    font-size: 20rpx;
    color: #10a28f;
    padding: 4rpx 10rpx;
    border-radius: 20rpx;
  }
}
</style>
